<template>
  <div class="main">
    <div class="bigbox" style="max-width: 1920px;">
      <div>
        <el-row :gutter="30" justify="center">
          <el-col :span="2">
            <p class="title" style="font-weight: bolder">解决方案</p>
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>热门</p>
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>智慧灌区</p>
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>智慧水利</p>
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>城市生命线</p>
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>地质安全</p>
          </el-col>
        </el-row>
      </div>
      <img
          src="https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3db6a13b-64e2-4102-9fb0-93a4fdc6e176.jpg"
          alt=""/>
    </div>
    <div class="artifactbox">
      <el-row>
        <el-col :span="4">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
          >
            <el-menu-item index="-1" style="background-color: #005bac">
              <el-text style="font-size: 2rem;color: white" disabled>相关产品</el-text>
            </el-menu-item>

            <el-menu-item
                v-for="(item, index) in menu.length"
                :key="index"
                @click="menuClick(index)"
            >
              <el-text truncated style="color: white">{{ menu[index] }}</el-text>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="19" :offset="1">
          <el-text type="info" style="font-size:xx-large;font-weight: bolder; color: #3d669d">大型灌区信息化解决方案
          </el-text>
          <el-divider border-style="double"/>
          <el-button style="margin-bottom: 20px" type="primary" disabled color="#006eff">一 背景分析</el-button>
          <div>
            <el-text size="large" style="line-height: 2.5rem" line-clamp="5">
              据水利部16日消息，水利部、国家发改委近日正式印发《“十四五”重大农业节水供水工程实施方案》，明确在“十四五”期间优先推进实施纳入国务院确定的150项重大水利工程建设范围的30处新建大型灌区，优选124处已建大型灌区实施续建配套和现代化改造，中央预算内投资将予以积极支持，同时要求地方统筹加大财政支持力度，创新投融资体制机制，多渠道筹集资金，确保建设资金及时足额到位。方案实施后，预计新建大型灌区可新增有效灌溉面积1500万亩改善灌溉面积980万亩。
              《“十四五”重大农业节水供水工程实施方案》中提出灌区信息化建设，作为灌区建设内容部分的重中之重!
            </el-text>
          </div>
          <el-divider border-style="double"/>
          <el-button style="margin-bottom: 20px" type="primary" disabled color="#006eff">二 建设内容</el-button>
            <div v-for="(item, index) in content" :key="index">
              <p>{{ item.title }}</p>
              <p>{{ item.contents}}</p>
              <p style="width: 100%; text-align: center">
                <el-image fit="scale-down" x :src="item.img" alt=""/>
              </p>
            </div>
          <el-divider border-style="double"/>
          <el-button style="margin-bottom: 20px" type="primary" disabled color="#006eff">三 典型应用</el-button>
            <div v-for="(item, index) in content1" :key="index">
              <p>{{ item.title }}</p>
              <p style="width: 100%; text-align: center">
                <el-image fit="scale-down" x :src="item.img" alt=""/>
              </p>
            </div>
          <el-divider border-style="double"/>
          <el-button style="margin-bottom: 20px" type="primary" disabled color="#006eff">四 系统特点</el-button>
          <div>
            <ul class="sidian">
              <li style="line-height: 2rem" v-for="(item, index) in content2" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>


  </div>
</template>
<script setup>
import {listTicket, listCulturalRelic} from "@/api/serch/index";
import {ref, onMounted, nextTick, reactive, toRefs} from "vue";
import Swiper, {Pagination, Navigation} from "swiper";
import router from "@/router";

const apiUrl = process.env.VUE_APP_API_URL;
import "swiper/css/swiper.min.css";

const swiper = ref(null);
const menu = [
  '平板雷达水位计（型号：HCRZ-LD',
  '超声波液位计（型号：HC-CS808',
  '雷达流量计（型号：HCRZ-LL10',
  '声学多普勒流量流速仪（型号：HC',
  '时差法超声波明渠流量计（型号：H',
  '电磁明渠流量计（型号：HC-DC91',
  '轨道自动测流车（型号：HC-YT900',
  '翻斗式雨量筒（型号：HC-YL907',
  '视频遥测终端机（型号：HC-TX9',
  '智能一体化闸门（型号：HCRZ-ZN'

];
const content = [
  {
    title: '管理云平台',
    contents: '灌区信息化建设，围绕灌区现有水资源、水生态和水灾害等问题， 实现智能感知、自动控制、智能监视、智能管理，进一步提升灌区 现代化管理水平，促进灌区现代化农业的发展。',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/c8324a30-1c93-424c-8eeb-e5439761bb2f.png'
  },
  {
    title: '智能感知体系建设',
    contents: '智能感知网络建设以物联感知、航空感知和视频感知为主。主要包括雨情、水情、工情、墒情、水质、工程安全监测，以及智慧水管理系统所需信息。信息采集的布局应覆盖到信息流全过程，并形成闭环，建成全域覆盖的物联感知网。',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/a9d49b7a-99fb-4956-8068-49679b300a77.png'
  },
];
const content1 = [
  {
    title: '主干渠轨道车自动测流系统',
    img: 'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/1e432009-9a22-4424-a646-22ad18f6410e.jpg'
  }
];
const content2 = [
  '构建出统一的“地下测、网上控、平台管”的灌区综合监管 “一张图”。',
  '实现动态计划用水,水资源优化配置，实时适量灌水与排水，满足灌区现代化生产需求,提高经济效益。',
  '科学灌溉，提高种植水平，保障国家粮食安全和农产品有效供给， 实现灌区可持续发展。',
];
const menuClick = (index) => {
  router.push('/ProductCenterInfo')
};
</script>
<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}
.title {
  border-right: 1px solid #7272725b;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.main {
  width: 100%;

  .bigbox {
    margin: 0 auto;

    img {
      width: 100%;
      height: auto;
    }
  }

  .artifactbox {
    margin: 60px auto 0;
    width: 80%;
  }

}

@media (min-width: 1921px) {
  .main {
    .bigbox {
      max-width: 100% !important;
    }
  }
}

.sidian li::marker {
  font-size: 1rem;
  content: "🏅";
}

.sidian li {
  text-indent: 10px;
}

</style>